<template>
    <div class="systemsetting-wrap">
        <div class="panel-search-top">
            <div class="form">
                <el-form ref="form" :inline="true" label-width="0px" size="mini">
                    <el-form-item>
                        <el-input placeholder="请输入查询内容"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="button-group-operate">
                <el-button icon="el-icon-" @click="handleAdd1()">网卡设置</el-button>
                <el-button icon="el-icon-" @click="handleAdd2()">管理IP设置</el-button>
                <el-button icon="el-icon-" @click="handleAdd3()">日期时间设置</el-button>
                <el-button icon="el-icon-" @click="handleAdd4()">产品授权</el-button>
                <el-button icon="el-icon-" @click="handleAdd5()">系统操作</el-button>
            </div>
        </div>

        <div class="pagecontent">
            <div class="panel">
                <div class="panel-con">
                    <el-table :data="json.portraitC1">
                        <el-table-column prop="c1" label="序号"></el-table-column>
                        <el-table-column prop="c2" label="网卡名称"></el-table-column>
                        <el-table-column prop="c3" label="IP地址"></el-table-column>
                        <el-table-column prop="c1" label="接收数据包(个)"></el-table-column>
                        <el-table-column prop="c2" label="接受字节"></el-table-column>
                        <el-table-column prop="c4" label="工作状态">
                            <template slot-scope="scope">
                                <el-select placeholder="请选择" size="mini">
                                    <el-option label="选择1" value="1"></el-option>
                                    <el-option label="选择2" value="2"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="compage">
                        <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="网卡设置" width="650px" :visible.sync="dialogAdd1">
            <el-form ref="form" label-width="230px" label-position="right" size="mini">
                <el-form-item label="网卡名称">

                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="采集频率">
                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="网卡状态">
                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作模式">
                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="buttonlist">
                    <el-button type="primary">确定</el-button>
                    <el-button @click="dialogAdd1 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="管理IP设置" width="650px" :visible.sync="dialogAdd2">
            <el-form ref="form" label-width="230px" label-position="right" size="mini">
                <el-form-item label="IP地址">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="子网掩码">

                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="默认网关">
                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="首选DNS">
                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备选DNS">
                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                    <a href="#" class="help"></a>
                </el-form-item>
                <el-form-item class="buttonlist">
                    <el-button type="primary">确定</el-button>
                    <el-button @click="dialogAdd2 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="日期时间设置" width="650px" :visible.sync="dialogAdd3">
            <el-form ref="form" label-width="230px" label-position="right" size="mini">
                <el-form-item label="当前系统时间">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="时间同步服务器">

                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="buttonlist">
                    <el-button type="primary">确定</el-button>
                    <el-button @click="dialogAdd3 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="产品授权" width="650px" :visible.sync="dialogAdd4">
            <el-form ref="form" label-width="230px" label-position="right" size="mini">
                <el-form-item label="版本号">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="到期日期">

                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="buttonlist">
                    <el-button type="primary">确定</el-button>
                    <el-button @click="dialogAdd4 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="系统操作" width="650px" :visible.sync="dialogAdd5">
            <el-form ref="form" label-width="150px" label-position="right" size="mini">
                <el-form-item label="">
                    <el-button type="primary" class="ban">重启服务器</el-button>
                    <el-button type="primary">关闭服务器</el-button>
                    <el-button type="primary" class="ban">导出配置</el-button>
                    <el-button type="primary" class="ban">导入配制</el-button>
                </el-form-item>
                <el-form-item class="buttonlist" style="margin-left:153px">
                    <el-button type="primary">确定</el-button>
                    <el-button @click="dialogAdd5 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="请选择导入文件" width="650px" :visible.sync="dialogInport">
            <el-form ref="form" label-width="230px" label-position="right" size="mini">
                <el-form-item label="文件">
                    <el-select placeholder="请选择文件">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="buttonlist">
                    <el-button type="primary">确定</el-button>
                    <el-button @click="dialogInport = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="请先命名导出文件" width="650px" :visible.sync="dialogExport">
            <el-form ref="form" label-width="230px" label-position="right" size="mini">
                <el-form-item label="名称">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item class="buttonlist">
                    <el-button type="primary">确定</el-button>
                    <el-button @click="dialogExport = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import Data from "../data/index";

export default {
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      dialogAdd1: false,
      dialogAdd2: false,
      dialogAdd3: false,
      dialogAdd4: false,
      dialogAdd5: false,
      json: {
        portraitC1: Data.portraitC1
      }
    };
  },
  components: {},
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){
        alert('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        alert("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        alert('备注信息最大不超30个中文字符');
        return;
      }

    },
    handleAdd1() {
      this.dialogAdd1 = true;
    },
    handleAdd2() {
      this.dialogAdd2 = true;
    },
    handleAdd3() {
      this.dialogAdd3 = true;
    },
    handleAdd4() {
      this.dialogAdd4 = true;
    },
    handleAdd5() {
      this.dialogAdd5 = true;
    }
  }
};
</script>
<style lang="scss">
@import url(../assets/css/base.css);
</style>
<style lang="scss" scoped>
.ban {
  background: rgba(108, 167, 160, 1) !important;
}
</style>

